%app {
  @apply
  box-border
  relative
  p-0
  m-0
  w-full
  h-max
  tracking-wide
  font-myTextFont
  bg-myTheme-dark;
}

%app-light {
  @extend %app;
  @apply bg-slate-100;
}

%app-dark {
  @extend %app;
  @apply bg-myTheme-dark;
}

%container {
  @apply
  relative
  min-h-screen
  max-h-fit
  w-full
  mt-2
  flex
  flex-col
  items-center;
}

%container-dark {
  @extend %container;
  @apply 
  
  /* max-sm:bg-green-800 /* до 640 px*/
  /* max-md:bg-red-800 /* от 640 до 768 px*/
  /* max-lg:bg-blue-800  /* от 768 до 1024 px*/
  /* max-xl:bg-yellow-600 /* от 1024 до 1280 px*/
  /* bg-violet-800 /* от 1280 px*/
  bg-myTheme-primary
  text-myTheme-light;
}

%container-light {
  @extend %container;
  @apply
  bg-myTheme-light;
}

%title {
  @apply
  w-full
  h-fit
  text-center
  max-sm:text-3xl
  max-md:text-4xl
  max-lg:text-5xl
  max-xl:text-6xl
  text-7xl
  uppercase
  tracking-wider
  font-myTitleFont
  font-black
  mt-6
  cursor-default
  select-none;
};

%title-light {
  @extend %title;
  @apply text-myTheme-light;
}

%title-dark {
  @extend %title;
  @apply text-myTheme-primary;
}

%section-title {
  @apply
  text-myTheme-light
  border-b-4
  border-opacity-50
  border-b-myTheme-accent
  pt-4
  pb-8
  mb-4
  select-none;
}

%section-title-light {
  @extend %section-title;
  @apply text-myTheme-primary;

}

%section-title-dark {
  @extend %section-title;
  @apply text-myTheme-light;
}

%container-exampels {
  @apply
  relative
  h-96
  w-100
  min-w-100
  p-5
  rounded-s-2xl
  bg-myTheme-dark
  overflow-hidden;
}

%auth-pages-container {
  @apply h-full
  w-full
  relative
  flex
  flex-col
  justify-between
  z-10;

  .title {
    @apply content-center;

    h5 {
      @apply w-full
      text-center
      text-2xl
      font-bold
      font-myTitleFont
      text-myTheme-light
      uppercase;
    }
  }
}